1. TRANSLATE - Pomjeranje

Osnovne

Što je?

translate() pomjera element u X i Y smjeru bez utjecaja na redoslijed HTML-a. Element zadržava svoje mjesto u dokumentu, ali se vizualno pomjera.

Sintaksa:

transform: translate(X, Y);
  • X: Pomjeranje horizontalno (px, %, em, itd.)
  • Y: Pomjeranje vertikalno (opciono)
  • translateX(): Samo horizontalno
  • translateY(): Samo vertikalno

Primjer 1: Osnovni Translate

Pomjereno
transform: translate(50px, 30px);

Primjer 2: Samo X Smjer

X: 80px
transform: translateX(80px);

Primjer 3: Samo Y Smjer

Y: 60px
transform: translateY(60px);

2. ROTATE - Rotacija

Transformacije

Što je?

rotate() rotira element oko njegove centre točke. Koristi se kut u stupnjevima (deg), radijanima (rad) ili zavojima (turn).

Sintaksa:

transform: rotate(angle);
  • angle: Kut rotacije (deg, rad, turn)
  • Pozitivan kut: Rotacija u smjeru kazaljke na satu
  • Negativan kut: Rotacija suprotno od smjera kazaljke
  • Primjer: 45deg, -90deg, 0.5turn

Primjer 1: Rotacija 45°

45°
transform: rotate(45deg);

Primjer 2: Rotacija 90°

90°
transform: rotate(90deg);

Primjer 3: Negativna Rotacija -60°

-60°
transform: rotate(-60deg);

3. SCALE - Skaliranje

Veličina

Što je?

scale() povećava ili smanjuje element. Koristi se brojčana vrijednost gdje je 1 originalna veličina.

Sintaksa:

transform: scale(X, Y);
  • 1 = 100% (originalna veličina)
  • > 1 = uvećanje (1.5 = 150%)
  • < 1 = smanjenje (0.5 = 50%)
  • scaleX(): Samo horizontalno
  • scaleY(): Samo vertikalno

Primjer 1: Uvećanje - scale(1.5)

1.5x
transform: scale(1.5);

Primjer 2: Smanjenje - scale(0.6)

0.6x
transform: scale(0.6);

Primjer 3: ScaleX(2) - Samo Širina

Šire
transform: scaleX(2);

4. SKEW - Naginjanje

Distorzija

Što je?

skew() naginje element pod kutom, bez promjene dimenzija. Stvara efekt distorzije.

Sintaksa:

transform: skew(X-angle, Y-angle);
  • X-angle: Naginjanje oko Y-ose (horizontalno)
  • Y-angle: Naginjanje oko X-ose (vertikalno)
  • skewX(): Samo horizontalno naginjanje
  • skewY(): Samo vertikalno naginjanje
  • Mjere: deg, rad, turn

Primjer 1: Skew(20deg, 10deg)

Nagnjeno
transform: skew(20deg, 10deg);

Primjer 2: SkewX(30deg) - Samo X

X Skew
transform: skewX(30deg);

Primjer 3: SkewY(25deg) - Samo Y

Y Skew
transform: skewY(25deg);

5. KOMBINOVANE TRANSFORMACIJE

Napredne

Što je?

Možete kombinovati više transformacija u jedan transform redak. Redoslijed izvršavanja je važan!

Sintaksa:

transform: translate() rotate() scale() skew();
  • Redoslijed se izvršava slijeva nadesno
  • Svaka transformacija utječe na sljedeću
  • Primjer: translate(50px, 30px) rotate(45deg) scale(1.2)

Primjer 1: Translate + Rotate

Move & Rotate
transform: translate(40px, 20px) rotate(25deg);

Primjer 2: Scale + Rotate + Skew

Sve zajedno
transform: scale(1.3) rotate(15deg) skewX(10deg);

Primjer 3: Kompleksna Transformacija

Kompleks
transform: translate(30px, 30px) scale(1.1) rotate(30deg) skewY(5deg);

6. TRANSFORM-ORIGIN - Točka Rotacije

Napredne

Što je?

transform-origin određuje točku oko koje se transformacija vrši. Standardno je centar elementa (50% 50%).

Sintaksa:

transform-origin: X Y;
  • Vrijednosti: top, bottom, left, right, center, %, px, em
  • Primjer: transform-origin: top left; (gornji lijevi kut)
  • Primjer: transform-origin: 0 0; (0% 0%)
  • Primjer: transform-origin: 100% 0; (gornji desni kut)

Primjer 1: Center (Default)

Center
transform-origin: center center;
transform: rotate(45deg);

Primjer 2: Top Left

Top Left
transform-origin: top left;
transform: rotate(45deg);

Primjer 3: Bottom Right

Bottom Right
transform-origin: bottom right;
transform: rotate(45deg);

7. PRAKTIČNI PRIMJERI - Animacije i Efekti

Primjena

Kako koristiti transformacije u praksi?

Transformacije su idealne za animacije i interaktivne efekte. Kombinira se sa CSS transitions ili animations.

Hover Efekt: Zoom & Rotate

Preiđi mišem
transition: transform 0.3s;
:hover {
  transform: scale(1.3) rotate(10deg);
}

Continuous Animation: Spinning

Rotirajuće
animation: spin 2s infinite linear;